<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/15
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <%--头部工具栏--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn" lay-event="update">角色授权</button>
    </script>
    <%--表格--%>
    <table id="roleTable" lay-filter="roleTable"></table>
</div>
<div id="grant" style="display: none">
    <div id="tree">授权树</div>
</div>
<script>
    let $ = layui.$;
    //渲染表格
    layui.use(["table"],function (){
        let table = layui.table;
        table.render({
            elem : "#roleTable",
            url : "/sys/findall",
            toolbar : "#headTool",
            cols : [[
                {type: 'radio', title:"选项"},
                {field:"rolename",title:"角色名称"},
            ]]
        });


        //事件监听
        table.on("toolbar(roleTable)",function (obj){
            if(obj.event == "update"){
                grants();
            }
        })
    });
    //授权
    function  grants(){
        //获取选中行
        let roleTable = layui.table.checkStatus("roleTable");
        //如果选中行长度为0，表示没选
        if(roleTable.data.length == 0 ){
            layui.layer.msg("请选择一个角色");
            return;
        }
        //获取选中行的角色id
        let roleId = roleTable.data[0].id;
        //发送请求
        /*** 传值方式
         <%--1.$.get(`${ctx}/sys/role/queryTreeData?roleId=`+roleId);--%>
         <%--2.$.get(`${ctx}/sys/role/queryTreeData?roleId=${roleId}`);--%>
         <%--3.$.get(`${ctx}/sys/role/queryTreeData`,${roleId});--%>
         <%--4.$.get(`${ctx}/sys/role/queryTreeData`,`roleId=${roleId}`);--%>
         也可以采用新的知识点，路径变量*/
        $.get(`/sys/role/query/${roleId}`)
            .then(({data})=>{
                console.log(data)
                //渲染tree树状组件
                layui.tree.render({
                    elem : "#tree",
                    data : data,
                    showCheckbox : true,
                    id : "treeChecked"
                })
            });
        //定义一个数组，用来存储勾选的权限
        var permIds = new Array();
        //显示树状组件
        layui.layer.open({
            type:"1",
            content:$("#grant"),
            title:"角色授权",
            area:"500px",
            btn:["确定","取消"],
            yes(){
                permIds = [];
                //点击确定获取勾选的权限即可
                let treeSelect = layui.tree.getChecked("treeChecked");
                //循环获取的权限
                $(treeSelect).each(function (i,e){
                    //将一级权限添加到数组
                    permIds.push(e.id);
                    $(e.children).each(function (i,e){
                        //将二级权限添加到数组
                        permIds.push(e.id);
                        $(e.children).each(function (i,e){
                            //将三级权限添加到集合
                            permIds.push(e.id);
                        })
                    })
                });
                //调用服务端授权方法
                $.post(`/sys/role/grant/${roleId}/${permIds}`)
                    .then(({msg})=>{
                        layui.layer.close(layui.layer.index);
                        layui.layer.msg(msg);
                    });
            }
        });

    }
</script>
</body>
</html>
